<template>
  <div class="search-box">
    <el-input
      v-model="searchKeyword"
      :placeholder="placeholder"
      clearable
      @keyup.enter="handleSearch"
    >
      <template #suffix>
        <el-icon class="search-icon" @click="handleSearch"><Search /></el-icon>
      </template>
    </el-input>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { Search } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'

const props = defineProps({
  placeholder: {
    type: String,
    default: '搜索商品'
  }
})

const router = useRouter()
const searchKeyword = ref('')

const handleSearch = () => {
  const keyword = searchKeyword.value.trim()
  if (!keyword) {
    ElMessage.warning('请输入搜索关键词')
    return
  }
  
  console.log('搜索组件触发搜索，关键词:', keyword)
  router.push({
    name: 'search',
    query: { keyword }
  })
}
</script>

<style scoped>
.search-box {
  width: 300px;
}

.search-icon {
  cursor: pointer;
  font-size: 20px;
  color: #409EFF;
}

@media (max-width: 768px) {
  .search-box {
    width: 100%;
  }
}
</style> 